import React from 'react';
import { Table, Button, Popconfirm } from 'antd';

interface Record {
  id: number;
  bookName: string;
  borrower: string;
  borrowDate: string;
  returnDate: string;
}

interface RecordListProps {
  records: Record[];
  onEdit: (record: Record) => void;
  onDelete: (id: number) => void;
}

const RecordList: React.FC<RecordListProps> = ({ records, onEdit, onDelete }) => {
  const columns = [
    {
      title: '书名',
      dataIndex: 'bookName',
      key: 'bookName',
    },
    {
      title: '借阅人',
      dataIndex: 'borrower',
      key: 'borrower',
    },
    {
      title: '借阅日期',
      dataIndex: 'borrowDate',
      key: 'borrowDate',
    },
    {
      title: '归还日期',
      dataIndex: 'returnDate',
      key: 'returnDate',
    },
    {
      title: '操作',
      key: 'action',
      render: (text: string, record: Record) => (
        <>
          <Button type="link" onClick={() => onEdit(record)}>还书</Button>
          <Button type="link" onClick={() => onEdit(record)}>编辑</Button>
          <Popconfirm title="确定删除吗?" onConfirm={() => onDelete(record.id)}>
            <Button type="link">删除</Button>
          </Popconfirm>
        </>
      ),
    },
  ];

  return <Table dataSource={records} columns={columns} rowKey="id" />;
};

export default RecordList;